<script setup lang="ts">
import { ref, onMounted } from "vue";
import { queryHotRank } from "@/api/product";

interface Product {
  id: number;
  name: string;
  description: string;
  avatar: string;
  productType: number;
  price: number;
  salesVolume: number;
  productionDate: string;
  expirationDate: string;
}

const hotProducts = ref<Product[]>([]);

// 获取热销商品数据
const fetchHotProducts = async () => {
  try {
    const res = await queryHotRank();
    if (res.success) {
      hotProducts.value = res.data;
    }
  } catch (error) {
    console.error("获取热销商品失败：", error);
  }
};

onMounted(() => {
  fetchHotProducts();
});

// 获取商品类型标签
const getProductTypeTag = (type: number) => {
  switch (type) {
    case 1:
      return "果蔬";
    case 2:
      return "畜产";
    case 3:
      return "水产";
    default:
      return "其他";
  }
};
</script>

<template>
  <div class="hot-rank">
    <div class="rank-header">
      <h3>销量排行榜</h3>
      <el-icon><Trophy /></el-icon>
    </div>

    <div class="rank-list">
      <el-card
        v-for="(product, index) in hotProducts"
        :key="product.id"
        class="rank-item"
      >
        <div class="rank-number" :class="`rank-${index + 1}`">
          {{ index + 1 }}
        </div>
        <el-image :src="product.avatar" class="product-image" fit="cover">
          <template #error>
            <div class="image-placeholder">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>

        <div class="product-info">
          <h4 class="product-name">{{ product.name }}</h4>
          <p class="product-desc">{{ product.description }}</p>
          <div class="product-meta">
            <el-tag
              size="small"
              :type="
                product.productType === 1
                  ? 'success'
                  : product.productType === 2
                  ? 'warning'
                  : 'info'
              "
            >
              {{ getProductTypeTag(product.productType) }}
            </el-tag>
            <span class="price">¥{{ product.price }}</span>
          </div>
          <div class="sales-volume">已售 {{ product.salesVolume }} 件</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.hot-rank {
  padding: 20px;
}

.rank-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 8px;
}

.rank-header h3 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.rank-item {
  position: relative;
  display: flex;
  padding: 15px;
  transition: all 0.3s;
}

.rank-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rank-number {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  background-color: #909399;
}

.rank-1 {
  background-color: #f7ba2a;
}
.rank-2 {
  background-color: #909399;
}
.rank-3 {
  background-color: #b88230;
}

.product-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-right: 15px;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

.product-info {
  flex: 1;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.product-desc {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #909399;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
}

.sales-volume {
  font-size: 14px;
  color: #909399;
}
</style> 